import React, {useState} from "react";
import "./Login.less";
import { Input, NavBar, Button, Divider, Toast } from "antd-mobile";
import github from "./images/github.png";
import qq from "./images/qq.png";
import wechat from "./images/wechat.png";
import axios from 'axios';
import { useNavigate } from "react-router-dom";

export default function Login(props) {
    let seconds = 10;
    //声明状态
    let [phone, setPhone] = useState('');
    let [code, setCode] = useState('');
    let [btnDisable, setBtnDisable] = useState(false);
    let [time, setTime] = useState(seconds);
    //获得 navigate 函数
    let navigate = useNavigate();

    //声明函数 发送验证码
    const send = async () => {
        //判断手机号的格式是否正确
        let reg = /^1\d{10}$/;
        //判断  reg 正则对象   test 是正则对象中的一个方法, 检测字符串是否满足正则要求
        if(!reg.test(phone)){ 
            //格式不正确
            return Toast.show({
                icon: 'fail',
                content: '手机号不正确',
              });
        }

        //按钮不可点
        setBtnDisable(true);
        //倒计时
        let timer = setInterval(() => {
            //自减时间
            setTime(--time);
            //判断
            if(time === 0){
                //恢复可点状态
                setBtnDisable(false);
                //停止定时器
                clearInterval(timer);
                //恢复倒计时的时间
                setTime(seconds);
            }

        }, 1000)

        try{
            //发送 AJAX 请求
            let result = await axios.post('/login/digits', {phone});
            //输出结果
            if(result.data.code === 20000){
                //请求成功
                Toast.show({
                    icon: 'success',
                    content: '验证码发送成功',
                  });
            }else{
                //请求失败
                Toast.show({
                    icon: 'fail',
                    content: '验证码发送失败',
                  });
            }
        }catch(e){
            return Toast.show({
                icon: 'fail',
                content: '请求响应异常, 请稍后再试~~',
              });
        }
    }

    //声明函数 登录操作
    const login = async () => {
        // phone  code
        try{
            //发送请求
            let result = await axios.post('/login/phone', {
                phone,
                code
            });
            //判断
            if(result.data.code === 20000){
                
                // 
                //登录成功
                Toast.show({
                    icon: 'success',
                    content: '登录成功, 欢迎回来',
                  });
                
                //v5 版本的路由切换写法
                // props.history.push('/usercenter');
                //页面完整跳转的写法
                // window.location.href = '/usercenter';
                //V6 跳转
                navigate('/usercenter')
            }else{
                return Toast.show({
                    icon: 'fail',
                    content: result.data.message,
                  });
            }
            
        }catch(e){
            return Toast.show({
                icon: 'fail',
                content: '请求响应异常, 请稍后再试~~',
              });
        }

    }


    return (
        <div className="login-container">
            {/* 顶部导航 start */}
            <NavBar back={null}>手机验证码登录</NavBar>
            {/* 顶部导航 end */}

            {/* 表单部分 start */}
            <div className="form">
                <div className="phone">
                    <Input clearable value={phone} onChange={(e) => {
                        setPhone(e);
                    }} />
                </div>
                <div className="code">
                    <Input clearable value={code} onChange={e => setCode(e)}   />
                    <Button size="small" color="danger" fill="outline" onClick={send} disabled={btnDisable}>
                       {btnDisable  ? `${time} 秒后再次获取` : '获取验证码 '}     
                    </Button>
                </div>
                <div className="h-20"></div>
                <Button block color="danger" size="large" onClick={login}>
                    登录
                </Button>
            </div>
            {/* 表单部分 end */}
            <div className="h-20"></div>
            {/* 其他登录方式 start */}
            <div className="other-login">
                <div className="line">
                    <Divider>其他登录方式</Divider>
                </div>
                <div className="h-20"></div>
                <div className="icons">
                    <img src={github} alt="" />
                    <img src={qq} alt="" />
                    <a href="http://localhost:8160/wechat/login"><img src={wechat} alt="" /></a>
                </div>
            </div>
            {/* 其他登录方式 end */}

            <div className="h-50"></div>
            <div className="h-20"></div>
            {/* 文字提示 start */}
            <div className="tips">
                未注册的手机号, 验证后会自动创建硅谷账号,
                登录即代表您同意《硅谷隐私政策》
            </div>
            {/* 文字提示 end */}
        </div>
    );
}
